<template>
  <div ref="chartDom" style="height:700px;width:700px" />
</template>

<script>

import * as echarts from 'echarts/core'
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import { BarChart, LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  TitleComponent,
  LineChart
])

export default {
  data() {
    return {
      priceTotal: [],
      num1: [],
      num2: [],
      num3: []
    }
  },

  mounted() {
    var app = {}

    // var chartDom = document.getElementById('main')
    // var myChart = echarts.init(chartDom)
    var myChart = echarts.init(this.$refs.chartDom)

    var option

    const posList = [
      'left',
      'right',
      'top',
      'bottom',
      'inside',
      'insideTop',
      'insideLeft',
      'insideRight',
      'insideBottom',
      'insideTopLeft',
      'insideTopRight',
      'insideBottomLeft',
      'insideBottomRight'
    ]
    app.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: posList.reduce(function(map, pos) {
          map[pos] = pos
          return map
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    }
    app.config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function() {
        const labelOption = {
          rotate: app.config.rotate,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          position: app.config.position,
          distance: app.config.distance
        }
        myChart.setOption({
          series: [
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            }
          ]
        })
      }
    }
    const labelOption = {
      position: app.config.position,
      distance: app.config.distance,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      rotate: app.config.rotate,

      fontSize: 16,
      rich: {
        name: {}
      }
    }
    option = {
      title: {
        text: '价格数量分析'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['公寓', '商铺', '别墅']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          name: '(元)',
          axisTick: { show: false },
          data: ['1000', '2000', '3000', '4000', '5000']
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量'
        }
      ],
      series: [
        {
          name: '公寓',
          type: 'bar',
          barGap: 0.3,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: this.num1
        },
        {
          name: '商铺',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: this.num2
        },
        {
          name: '别墅',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: this.num3
        }
      ]
    }

    option && myChart.setOption(option)
  },

  created() {
    this.getPriceTotal()
  },
  methods: {
    getPriceTotal() {
      for (let i = 0; i < 5; i++) {
        this.num1.push(Math.round(Math.random() * 1000))
        this.num2.push(Math.round(Math.random() * 1000))
        this.num3.push(Math.round(Math.random() * 1000))
      }
    }
  }
}
</script>

<style>

</style>
